<template>
  <el-tabs v-model="data.activeName" type="card" class="demo-tabs" @tab-click="tabClick">
    <el-tab-pane v-for="item in data.editableTabs" :key="item.name" :label="item.menuName" :name="item.name">
      <!-- 右键菜单开始：自定义标签页显示名称，保证每个标签页都能实现右键菜单 -->
      <template #label>
        <el-dropdown trigger="contextmenu" :id="item.name" @visible-change="handleChange($event, item.name)" ref="dropdownRef">
          <span :class="tabValue === item.name ? 'label' : ''">{{ item.menuName }}</span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="removeTab(item.name)">
                <el-icon><Close /></el-icon>关闭当前标签页
              </el-dropdown-item>
              <el-dropdown-item @click="removeTab(item.name, 'left')">
                <el-icon><DArrowLeft /></el-icon>关闭左侧标签页
              </el-dropdown-item>
              <el-dropdown-item @click="removeTab(item.name, 'right')">
                <el-icon><DArrowRight /></el-icon>关闭右侧标签页
              </el-dropdown-item>
              <el-dropdown-item @click="removeTab(item.name, 'other')">
                <el-icon><Operation /></el-icon>关闭其他标签页
              </el-dropdown-item>
              <el-dropdown-item @click="removeTab(item.name, 'all')">
                <el-icon><Minus /></el-icon>关闭全部标签页
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
  import { reactive, ref, watch, onMounted, getCurrentInstance } from 'vue';
  import { useRouter } from 'vue-router';
  const route = useRouter();
  let { proxy } = getCurrentInstance();

  const dropdownRef = ref();
  //是否pc端访问
  const handleChange = (visible, name) => {
    dropdownRef.value.forEach(item => {
      if (item.id === name) return;
      item.handleClose();
    });
    return true;
  };
  //默认激活首页
  let activeName = ref('/system/index');
  //tabs 菜单导航
  const editableTabs = reactive([]);
  const data = reactive({
    editableTabs: [],
    crumb: [],
    activeName: '/sys/index',
  });
  let indexAction = {
    name: '/sys/index',
    menuName: '首页',
    path: '/sys/index',
  };
  //移除tab  显示向佐移动的tab
  const removeTab = (targetName, type) => {
    //查找触发右键菜单所在标签页index
    const index = data.editableTabs.findIndex(item => item.name === targetName);
    //查找当前激活标签页index，存在当前激活标签页与触发右键菜单标签页不是同一个的情况
    const currentIndex = editableTabs.findIndex(item => item.name === activeName.value);
    switch (type) {
      case 'all': //关闭全部标签页
        //清空除【首页】外所有标签页
        data.editableTabs = [indexAction];
        data.activeName = '/sys/index'; //修改标签激活页
        break;
      case 'other': //关闭其他标签页
        data.editableTabs = [data.editableTabs[index]];
        if (targetName !== data.activeName) {
          data.activeName = targetName;
        }
        break;
      case 'left': //关闭左侧标签页
        data.editableTabs.splice(0, index);
        if (currentIndex < index) {
          data.activeName = targetName;
        }
        break;
      case 'right': //关闭右侧标签页
        data.editableTabs.splice(index + 1);
        if (currentIndex > index) {
          data.activeName = targetName;
        }
        break;
      default: //默认关闭当前标签页
        data.editableTabs.splice(index, 1);
        //当前激活标签页与触发右键菜单标签页是同一页
        debugger;
        if (targetName === data.activeName) {
          //当前激活标签页是标签页数组的第一个，页签还有其他的时，取下一个 否则将激活标签页设置为 首页
          //当前激活标签页不是标签页数组的第一个，则将激活标签页设置为当前激活标签页的前一页
          data.activeName = index === 0 && data.editableTabs.length === 0 ? indexAction.name : data.editableTabs[0].name;
        }
        break;
    }
    //激活菜单
    route.push(data.activeName);
  };
  // 点击tab时触发 跳转
  const tabClick = targetName => {
    route.push(targetName.paneName);
  };
  //刷新或点击菜单增加tab
  const changeTabs = () => {
    let items = route.currentRoute.value;
    if (!data.editableTabs.some(item1 => item1.name == items.path) && items.path !== '/system/index') {
      data.editableTabs.push({
        name: items.path,
        menuName: items.meta.title,
        path: items.path,
      });
    }
    data.activeName = items.path;
    route.push(data.activeName);
    proxy.$store.dispatch('addIncludeList', data.editableTabs);
  };
  onMounted(() => {
    //刷新时获取路由
    changeTabs();
  });
  watch(
    () => route.currentRoute.value,
    () => {
      changeTabs();
    }
  );
</script>
<style lang="scss" scoped>
  .label {
    color: var(--el-color-primary); //激活标签页高亮
  }
  :deep(.el-tabs__item) {
    &:hover {
      // span {
      //   color: var(--el-color-primary); //鼠标移到标签页高亮
      // }
    }
    .el-dropdown {
      line-height: inherit; // 统一标签页显示名称行高
    }
  }
  :deep(.is-active) {
    background-color: var(--el-color-primary);

    span {
      color: #ffff; //鼠标移到标签页高亮
    }
  }
</style>
